<template>
  <view class="container">
    <!-- 输入区域 -->
    <view class="input-group">
      <text class="label">贷款总额（万元）</text>
      <view class="input-box">
		  <input class="input" type="number" v-model="loanAmount" placeholder="请输入贷款金额" />
	  </view>
    </view>

    <view class="input-group">
      <text class="label">贷款年限</text>
      <view class="input-box">
		<input class="input" type="number" v-model="loanTerm" placeholder="请输入贷款年限" />
	  </view>
    </view>

    <view class="input-group">
      <text class="label">年利率（%）</text>
      <view class="input-box">
		<input class="input" type="number" v-model="annualRate" placeholder="请输入年利率" />
	  </view>
    </view>

    <radio-group class="radio-group" @change="handleMethodChange">
      <label class="radio-item">
        <radio value="bx" :checked="repaymentMethod === 'bx'" />等额本息
      </label>
      <label class="radio-item">
        <radio value="bj" :checked="repaymentMethod === 'bj'" />等额本金
      </label>
    </radio-group>

    <button class="calculate-btn" @tap="calculate">开始计算</button>

    <!-- 结果展示 -->
    <view class="result-box" v-if="showResult">
      <view class="result-item">
        <text>{{ repaymentMethod === 'bx' ? '每月月供' : '首月月供' }}</text>
        <text class="highlight">¥ {{ result.monthlyPayment || result.firstMonthPayment }}</text>
      </view>
      <view class="result-item">
        <text>总利息</text>
        <text class="highlight">¥ {{ result.totalInterest }}</text>
      </view>
      <view class="result-item">
        <text>总还款额</text>
        <text class="highlight">¥ {{ result.totalPayment }}</text>
      </view>
    </view>

    <!-- 还款计划表 -->
    <view class="schedule" v-if="showResult && repaymentMethod === 'bj'">
      <text class="tip">等额本金每月递减约 ¥ {{ result.monthlyDecrease }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loanAmount: 100,     // 单位：万元
      loanTerm: 30,        // 年
      annualRate: 4.9,     // 百分比
      repaymentMethod: 'bx', // 还款方式
      showResult: false,
      result: {
        monthlyPayment: 0,      // 等额本息月供
        firstMonthPayment: 0,   // 等额本金首月
        totalInterest: 0,       // 总利息
        totalPayment: 0,        // 总还款额
        monthlyDecrease: 0      // 每月递减金额
      }
    }
  },
  methods: {
    handleMethodChange(e) {
      this.repaymentMethod = e.detail.value
    },

    // 核心计算逻辑
    calculate() {
      if (!this.validateInput()) return
      
      const amount = this.loanAmount * 10000   // 转换为元
      const rate = this.annualRate / 100 / 12  // 月利率
      const months = this.loanTerm * 12        // 总月数

      if (this.repaymentMethod === 'bx') {
        this.calculateBX(amount, rate, months)
      } else {
        this.calculateBJ(amount, rate, months)
      }
      this.showResult = true
    },

    // 等额本息计算
    calculateBX(amount, rate, months) {
      const pow = Math.pow(1 + rate, months)
      const pmt = (amount * rate * pow) / (pow - 1)
      
      this.result.monthlyPayment = pmt.toFixed(2)
      this.result.totalPayment = (pmt * months).toFixed(2)
      this.result.totalInterest = (pmt * months - amount).toFixed(2)
    },

    // 等额本金计算
    calculateBJ(amount, rate, months) {
      const principal = amount / months  // 每月本金
      const firstInterest = amount * rate
      
      this.result.firstMonthPayment = (principal + firstInterest).toFixed(2)
      this.result.monthlyDecrease = principal * rate.toFixed(2)
      
      // 计算总利息
      const totalInterest = (months + 1) * amount * rate / 2
      this.result.totalInterest = totalInterest.toFixed(2)
      this.result.totalPayment = (amount + totalInterest).toFixed(2)
    },

    // 输入验证
    validateInput() {
      if (!this.loanAmount || !this.loanTerm || !this.annualRate) {
        uni.showToast({ title: '请填写完整信息', icon: 'none' })
        return false
      }
      if (this.loanAmount <= 0 || this.loanTerm <= 0 || this.annualRate <= 0) {
        uni.showToast({ title: '输入值必须大于0', icon: 'none' })
        return false
      }
      return true
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  font-size:26rpx;
}

.input-group {
  margin-bottom: 15rpx;
}

.label {
  display: block;
  margin-bottom: 5rpx;
  color: #666;
}
.input-box{
  height:auto;
  min-height:60rpx;
  padding: 10rpx;
  box-sizing:border-box;
  border: 2rpx solid #ddd;
  border-radius: 10rpx;
}
.input {
  height:40rpx;
  line-height:40rpx;
  font-size:30rpx;
}

.radio-group {
  margin: 15rpx 0;
}

.radio-item {
  margin-right: 20rpx;
}

.calculate-btn {
  width:100%;
  padding:20rpx;
  box-sizing:border-box;
  font-size:30rpx;
  line-height:1.2;
  background-color: #007AFF;
  color: white;
  margin: 20rpx 0;
  border-radius: 10rpx;
}

.result-box {
  background: #f8f8f8;
  padding: 15rpx;
  border-radius: 8rpx;
}

.result-item {
  display: flex;
  justify-content: space-between;
  margin: 10rpx 0;
}

.highlight {
  color: #e64340;
  font-weight: bold;
}

.tip {
  color: #888;
  font-size: 24rpx;
}
</style>